<template>
  <a-card style="width: 100%;height: 100%;">
    <div style="padding-bottom:10px">
      <a-button type="primary" @click="add">新增</a-button>
    </div>
    <a-table
      v-if="flg"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      :expanded-row-keys="expandedRowKeys"
      @expand="showchild"
    >
      <a-table
        slot="expandedRowRender"
        :columns="innerColumns"
        :data-source="innerData"
        :pagination="false"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            placement="topLeft"
            ok-text="Yes"
            cancel-text="No"
            @confirm="del(record)"
          >
            <template slot="title">
              <a>确定删除吗？</a>
            </template>
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-table>
    <form-modal
      ref="fm"
      :info="data"
      :title="title"
      @updateList="updateList"
      @updateList1="updateList1"
    />
  </a-card>
</template>

<script>
import formModal from './cpns/formModal.vue';
import { getEventControlList, delEventControl } from '@/services/users.js';
const columns = [
  {
    title: '类型名称',
    dataIndex: 'typeText',
    key: 'typeText'
  },
  {
    title: '类型状态码',
    dataIndex: 'typeCode',
    key: 'typeCode'
  },
  {
    title: '类型状态码id',
    dataIndex: 'id',
    key: 'id'
  }
];

const innerColumns = [
  { title: '状态名称', dataIndex: 'statuName', key: 'statuName' },
  { title: '状态编码', dataIndex: 'statusCode', key: 'statusCode' },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
];

export default {
  name: 'EventControlList',
  components: {
    formModal
  },
  data() {
    return {
      expandedRowKeys: [],
      flg: true,
      title: '',
      data: [],
      columns,
      innerColumns,
      innerData: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    refresh() {
      this.flg = false;
      setTimeout(() => {
        this.flg = true;
      }, 20);
    },
    showchild(a, b) {
      this.expandedRowKeys = [];
      this.expandedRowKeys.push(b.id);
      this.innerData = b.childList;
    },
    updateList() {
      this.getList().then(res => {
        this.expandedRowKeys = [];
      });
    },
    updateList1(vals) {
      const i = this.innerData.findIndex(v => v.id === vals.id);
      const j = this.data.findIndex(v => v.id === vals.pid);
      this.getList().then(res => {
        this.$set(this.innerData, i, this.data[j]['childList'][i]);
      });
    },
    async getList() {
      return new Promise(resolve => {
        getEventControlList().then(res => {
          if (res.code === 200) {
            res.data.forEach(element => {
              element.key = element.id;
            });
            this.data = res.data;
            resolve(true);
          }
        });
      });
    },
    add() {
      this.title = '添加';
      this.$refs.fm.open();
    },
    edit(record) {
      this.title = '编辑';
      this.$refs.fm.open(record);
    },
    async del(r) {
      const res = await delEventControl({
        fieldName: 'childField',
        fieldValue: r.id
      });
      if (res.code === 200) {
        this.$message.success('删除成功');
        this.getList().then(res => {
          if (res) {
            this.$delete(
              this.innerData,
              this.innerData.findIndex(v1 => {
                return v1.id === r.id;
              })
            );
          }
        });
      } else {
        this.$message.warning('删除失败');
      }
    }
  }
};
</script>

<style></style>
